<template>
  <div class="chat" ref="chat">
    <div>
      <div class="messages">
        <div class="icon">
          <i class="iconfont icon-conversation_icon"></i>
        </div>
        <div class="tips">
          <span>还没有聊天消息哦</span>
          <span>与商家、官方客服的聊天会显示的这里</span>
          <span>联系官方客服</span>
        </div>
      </div>
      <div class="recommend-list">
        <div class="title">
          <i class="iconfont icon-jingxuanchanpin"></i>
          <span>精选推荐</span>
        </div>
        <RecommendList />
      </div>
    </div>
  </div>
</template>

<script>
import RecommendList from '@/components/RecommendList'
import BScroll from 'better-scroll'
export default {
  name: 'Chat',
  mounted () {
    if(localStorage.getItem('pdd_user')) {
      this.$nextTick(() => {
      this._initBScroll()
        })
    } else {
      this.$router.replace('/personal')
    }
  },
  components: {
    RecommendList
  },
  methods: {
    _initBScroll () {
      this.chatScroll = new BScroll(this.$refs.chat)
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '~@/assets/style/mixins.styl'
.chat
  position fixed
  left 0
  right 0
  top 0
  bottom 50px
  overflow hidden 

  .messages
    width 100%
    min-height 400px
    display flex
    flex-direction column
    justify-content space-around
    align-items center
    background #f5f5f5

    .icon
      .iconfont
        color $lightGray
        font-size 80px
        font-weight light

    .tips
      display flex
      flex-direction column
      justify-content center
      align-items center
      span
        &:nth-child(1)
          font-size 16px
          color #333
        &:nth-child(2)
          font-size 14px
          color $lightGray
          margin-top 20px
        &:nth-child(3)
          font-size 14px
          color #3aace9
          margin-top 22px
  .recommend-list
  
    .title
      width 100%
      display flex
      justify-content center
      align-items center
      height 30px
      color $pddRed
      .iconfont
        font-size 25px
        margin-right 2px
        vertical-align top



</style>
